<div id="window-sOpt" class="gadiend-white sOpt hidden bdlccc bdrccc">
    <div class="grid_x">
        <div class="grid_6" >
            <div class="displaySetings  bdccc">
                <div class="lh20 fwb pl12 mb4 gadiend-white bdbccc">Tùy chỉnh dữ liệu</div>
                <div style="height: 180px;">
                    <div class="grid_x pb4 ml4 radio {{if $display==1}}cked{{/if}}" value="1">
                        <div class="grid_x w14px mr12 ic" style="height: 14px;"></div>
                        <div class="grid_5 lh16 label">Tất cả dữ liệu</div>
                    </div>
                    <div class="grid_x pb4 ml4 radio {{if $display==0}}cked{{/if}}" value="0">
                        <div class="grid_x w14px mr12 ic " style="height: 14px;"></div>
                        <div class="grid_5 lh16 label">Ẩn dữ liệu đã xóa</div>
                    </div>
                    <div class="grid_x pb4 ml4 radio {{if $display==-1}}cked{{/if}}" value="-1">
                        <div class="grid_x w14px mr12 ic" style="height: 14px;"></div>
                        <div class="grid_5 lh16 label">Chỉ hiện dữ liệu đã xóa</div>
                    </div>
                    <div class="clear"></div>
                    <div class="pr ml-1 mr-1 bdtccc" style="height: 4px;background: #FAFAFA;"></div>
                    <div class="lh20 fwb pl12 gadiend-white bdtccc bdbccc">
                        Khác
                    </div>
                    <div>
                        {{if isset($anotherSetting)}}
                            {{include file="../"|cat:$controller|cat:"/anotherSetting.tpl"}}
                        {{else}}
                            <div class="pt4 pl4">Bạn muốn thêm tùy chỉnh gì?</div>
                        {{/if}}
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        <div class="grid_x" >
            <div class="columnsSetings ml4 ">
                <div class="lh20 fwb pl12 gadiend-white bdtccc bdlccc bdrccc">Ẩn/Hiện các cột</div>
                <div>
                    <div id="jqxListBox_Columns" class="tranf0"></div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var myGrid=$("#jqxGrid");
        var theme="classic";
        
        $("#jqxListBox_Columns").jqxListBox({ 
            checkboxes: true,
            source: {{json_encode($listitems)}}, 
            width: 200, 
            height: 184, 
            theme: theme });
        $("#jqxListBox_Columns").bind('checkChange', function (event) {
            if (event.args) {
                var hide=1;
                if (event.args.checked) {
                    myGrid.jqxGrid('showcolumn', event.args.value);  
                    hide=0;
                }
                else {
                    myGrid.jqxGrid('hidecolumn', event.args.value);
                }
                var url,data;
                url="{{base_url()}}backend/fe548e5a964095e7c80cd8d3721be2ef/ChangeColumnDisplay/{{$controller}}";
                data={
                    col     :   event.args.value,
                    hide    :   hide
                }
                myAjax(url,data);
            }
        });
        $(".columnsSetings .checkbox").click(function(){
            try{
                var value=$(this).attr("value");
                var col=$(this).attr("value");
                if ($(this).hasClass('cked')) {
                    myjqxGrid.ShowColumn(col);
                }else{
                    myjqxGrid.HideColumn(col);
                }
            }catch(e){
                console.log("Change Display Setting:\nError"+e.message+" ↵ Call");
                tipMessage(e.message);
            }
            chkb(this);
        });
        $(".displaySetings .radio").click(function(){
            try{
                var value=$(this).attr("value");
                console.log("Change Display Setting:"+value+" ↵ Call");
                myjqxGrid.DisplayChange(value);

            }catch(e){
                console.log("Change Display Setting:\nError"+e.message+" ↵ Call");
                tipMessage(e.message);
            }
            rdbck(this);
        });
        
    });
    function toogleEvent(){
        $(".btnseparator.hidden,.events.hidden").toggle();
        $(".events span.show").toggleClass("hide");
    }
    function AddNewItem(){
        $(".group-events.g").hide();
        $(".group-events.e").show();
    }
    function DeleteSelectRow(){
        try{
            var myGrid=$("#jqxGrid");
            var rowindexes = myGrid.jqxGrid('getselectedrowindexes');
            var IDs=new Array();
            if(rowindexes.length>0){
                for(var i=0;i<rowindexes.length;i++){
                    var rowData=myGrid.jqxGrid('getrowdata', rowindexes[i]);
                    IDs[i] = rowData.ID;
                }
                ShowConfirmDialogMessage("Bạn muốn xóa những dòng đã chọn?<br/>"+IDs,"Delete?",function(){
                    CloseConfirmDialogMessage();
                    console.log("Delete:\nIDs:"+IDs+" ↵ Call");
                    var url,data;
                    url="{{base_url()}}APanel/fe548e5a964095e7c80cd8d3721be2ef/Delete/{{$token}}/{{$controller}}";
                    data={
                        ID      :   IDs
                    }
                    isrunning=true;
                    myAjax(url,data,function(result){
                        isrunning=false;
                        if(result.code>=0){
                            myjqxGrid.Refresh();
                        }else{
                            tipMessage(result.msg);
                        }
                    });
                });
            }else{
                tipMessage("Hãy chọn ít nhất một dòng.");
            }
        }catch(e){
            console.log("JSON Error:"+e.message+"\n↵ Error");
            tipMessage(e.message);
            //ShowErrorDialogMessage("Sorry. Your request could not be completed.<br/> Please check your input data.");
        }
    }
    function RestoreSelectRow(){
        try{
            var myGrid=$("#jqxGrid");
            var rowindexes = myGrid.jqxGrid('getselectedrowindexes');
            var IDs=new Array();
            if(rowindexes.length>0){
                for(var i=0;i<rowindexes.length;i++){
                    var rowData=myGrid.jqxGrid('getrowdata', rowindexes[i]);
                    IDs[i] = rowData.ID;
                }
                ShowConfirmDialogMessage("Bạn muốn khôi phục những dòng đã chọn?<br/>"+IDs,"Restore?",function(){
                    CloseConfirmDialogMessage();
                    console.log("Restore:\nIDs:"+IDs+" ↵ Call");
                    var url,data;
                    url="{{base_url()}}APanel/fe548e5a964095e7c80cd8d3721be2ef/Restore/{{$token}}/{{$controller}}";
                    data={
                        ID      :   IDs
                    }
                    isrunning=true;
                    myAjax(url,data,function(result){
                        isrunning=false;
                        if(result.code>=0){
                            myjqxGrid.Refresh();
                        }else{
                            tipMessage(result.msg);
                        }
                    });
                });
            }else{
                tipMessage("Hãy chọn ít nhất 1 dòng.");
            }
        }catch(e){
            console.log("JSON Error:"+e.message+"\n↵ Error");
            tipMessage(e.message);
            //ShowErrorDialogMessage("Sorry. Your request could not be completed.<br/> Please check your input data.");
        }
    }
    function ChangeStatusSelectedRow(Status){
        try{
            var myGrid=$("#jqxGrid");
            var rowindexes = myGrid.jqxGrid('getselectedrowindexes');
            var IDs=new Array();
            if(rowindexes.length>0){
                for(var i=0;i<rowindexes.length;i++){
                    var rowData=myGrid.jqxGrid('getrowdata', rowindexes[i]);
                    IDs[i] = rowData.ID;
                }
                ShowConfirmDialogMessage("Bạn muốn thay đổi trạng thái các dòng đã chọn?<br/>"+IDs,"Public?",function(){
                    CloseConfirmDialogMessage();
                    console.log("Change status:\nIDs:"+IDs+"\nStatus:"+Status+" ↵ Call");
                    var url,data;
                    url="{{base_url()}}APanel/fe548e5a964095e7c80cd8d3721be2ef/ChangeStatus/{{$token}}/{{$controller}}";
                    data={
                        ID      :   IDs,
                        Status  :   Status
                    }
                    isrunning=true;
                    myAjax(url,data,function(result){
                        isrunning=false;
                        if(result.code>=0){
                            myjqxGrid.Refresh();
                        }else{
                            tipMessage(result.msg);
                        }
                    });
                });
            }else{
                tipMessage("Vui lòng chọn ít nhất 1 dòng.");
            }
        }catch(e){
            console.log("JSON Error:"+e.message+"\n↵ Error");
            tipMessage(e.message);
            //ShowErrorDialogMessage("Sorry. Your request could not be completed.<br/> Please check your input data.");
        }
    }
</script>